<!--阿里云配置-->
<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card shadow="never"
                 body-style="padding: 0;">
          <el-form ref="form"
                   :model="form"
                   :rules="rules"
                   label-width="180px"
                   style="max-width: 650px; padding: 34px 20px 0 20px"
                   @keyup.enter.native="save"
                   @submit.native.prevent>
            <el-form-item label="允许类型:"
                          prop="qiuniu_file_type">
              <el-input v-model.trim="form.qiuniu_file_type"
                        placeholder="允许类型(英文逗号做分割)"
                        clearable />
              <span>注意:【英文逗号做分割】允许类型doc,gif,ico,
                icon,jpg,pem,png,rar,jpeg</span>
            </el-form-item>
            <el-form-item label="允许大小:"
                          prop="qiuniu_file_size">
              <el-input v-model.trim="form.qiuniu_file_size"
                        placeholder="请输入允许大小"
                        clearable />
              <span>注意:【设置允许上传大小，单位:b】</span>
            </el-form-item>

            <el-form-item label="公钥信息:"
                          prop="qiniu_access_key">
              <el-input v-model.trim="form.qiniu_access_key"
                        show-password
                        placeholder="请选择七牛云公钥信息"
                        clearable />

              <span>注意:【用于签名的公钥】 </span>
            </el-form-item>

            <el-form-item label="私钥信息"
                          prop="qiniu_secret_key">
              <el-input v-model.trim="form.qiniu_secret_key"
                        show-password
                        placeholder="请输入七牛云私钥信息"
                        clearable />
              <span>注意:【用于签名的私钥】 </span>
            </el-form-item>
            <el-form-item label="存储空间"
                          prop="qiniu_bucket">
              <el-input v-model.trim="form.qiniu_bucket"
                        placeholder="请输入七牛云存储空间"
                        clearable />
              <span>注意:【请保证bucket为可公共读取的】</span>
            </el-form-item>
            <el-form-item label="访问域名"
                          prop="qiniu_domin">
              <el-input v-model.trim="form.qiniu_domin"
                        placeholder="请输入七牛云访问域名"
                        clearable />
              <span>
                注意:【七牛支持用户自定义访问域名。注:
                url开头加http:/或https://结尾不加例: http://abc.com】</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         :loading="loading"
                         @click="save">
                保存更改
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { configEdit } from '@/api/config/index'
export default {
  name: 'index',
  props: {
    tabSwitch: String,
    data: Object
  },
  data () {
    return {
      loading: false,
      currentData: null,
      isUpdate: false,
      storageMode: '',
      form: {
        // 允许类型
        // qnyAllowType: '',
        qiuniu_file_type: '',
        // 允许大小
        // qnyAllowSize: '',
        qiuniu_file_size: '',
        // 公钥信息
        // qnyPublicKey: '',

        qiniu_access_key: '',

        // 私钥信息
        // qnyPrivateKey: '',
        qiniu_secret_key: '',
        // 存储空间
        // qnyStorageSpace: '',
        qiniu_bucket: '',
        // 访问域名
        // qnyVisitUrl: '',
        qiniu_domin: '',
        // 储存方式
        upload_way: '2'
        // 用户id
        // userId: this.$store.state.user.info.userId
      },
      // 表单验证规则
      rules: {
        qiuniu_file_type: [
          {
            required: true,
            message: '允许类型(英文逗号做分割)',
            trigger: 'blur'
          }
        ],
        qiuniu_file_size: [
          {
            required: true,
            message: '请输入允许大小',
            trigger: 'blur'
          }
        ],
        qiniu_access_key: [
          {
            required: true,
            message: '请输入七牛云accessKey',
            trigger: 'blur'
          }
        ],
        qiniu_secret_key: [
          {
            required: true,
            message: '请输入七牛云accessKeySecret',
            trigger: 'blur'
          }
        ],
        qiniu_bucket: [
          {
            required: true,
            message: '请输入七牛云存储空间',
            trigger: 'blur'
          }
        ],
        qiniu_domin: [
          {
            required: true,
            message: '请输入七牛云访问域名',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  activated () {
    this.init();
  },
  methods: {
    init () {
      if (this.currentData.ali_access_key) {
        this.$util.assignObject(this.form, {
          ...this.currentData
        });


        console.log(this.form);
        this.isUpdate = true;
      } else {
        // 
        this.isUpdate = false;
        console.log('新数据')
      }
    },
    save () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        console.log(this.form);
        this.form.upload_way = '2';
        // const saveOrUpdate = this.isUpdate ? storageModify : storageInsert;
        if (this.isUpdate) {
          this.form = {
            ...this.form, // 展开原有属性
            // 添加新属性并赋值
            // userId: undefined // 删除旧属性
          };
        }
        console.log(this.form, this.isUpdate);

        configEdit(this.form)
          .then((msg) => {
            console.log('msg', msg.msg);

            this.$message.success('保存成功');

            this.$emit('done');
            this.loading = false;
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e);
          });
      });
    }
  },
  watch: {
    tabSwitch: {
      handler (value) {
        console.log(value)
        this.form.upload_way = value;
      },
      immediate: true
    },
    data: {
      handler (value) {
        console.log(value);
        this.currentData = value;

        this.init();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/* tab 页签 */
.user-info-tabs {
  :deep(.el-tabs__nav-wrap) {
    padding-left: 24px;
  }

  :deep(.el-tabs__item) {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
  }
}
span {
  color: rgb(180, 180, 180) !important;
}
</style>
